<template>
<div class="home-box">
  <a name="top"></a>
  <!--轮播图-->
  <div class="box1">
    <div class="block">
      <el-carousel height="400px">
        <el-carousel-item v-for="item in imgs" :key="item">
          <img class="carousel"  :src="getImgURL(item)" alt="">
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
  <a name="product"></a>
  <!--热门产品-->
  <div class="box2">
    <div class="product-title"><p>热门产品</p></div>
    <div class="product-content">
      <el-skeleton class="item" v-for="item in lists" :key="item.id" :loading="loading" animated :count="3">
        <template>
          <el-card :body-style="{ padding: '0px', marginBottom: '1px' }" >
            <img :src="getImgURL(item.img)" class="image multi-content img " />
            <div style="padding: 14px;">
              <span>{{ item.productName }}</span>
              <div class="bottom card-header">
                <span class="time" style="font-weight: lighter;">{{ currentDate }}</span>
              </div>
              <el-button type="text" class="button" @click="openItem(item)">查看详情</el-button>
            </div>
          </el-card>
        </template>
      </el-skeleton>
    </div>
  </div>
  <!--热门产品的对话框对话框-->
  <el-dialog :title="dialogItem.name"  :visible.sync="defaultVision" :show-close="true" >
    <el-descriptions title="产品信息">
      <el-descriptions-item label="产品名称">{{ dialogItem.productName }}</el-descriptions-item>
      <el-descriptions-item label="月收入级别">
        <el-tag size="small">{{ dialogItem.monthlyIncome }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="产品年利率">{{dialogItem.rate * 100 + '%'}}</el-descriptions-item>
      <el-descriptions-item label="风险偏好">{{ dialogItem.risk}}</el-descriptions-item>
      <el-descriptions-item label="投资经验">{{ dialogItem.exp}}</el-descriptions-item>
      <el-descriptions-item label="产品类型">{{ dialogItem.type }}</el-descriptions-item>
    </el-descriptions>
  </el-dialog>
  <a name="news"></a>
  <div class="newBox">
    <NewsContent></NewsContent>
    <NewsBar></NewsBar>
  </div>
</div>
</template>

<script>
import NewsBar from "@/components/NewsBar";
import NewsContent from "@/components/NewsContent";
import axios from "axios";
export default {
  name: "Info",
  components: {
    NewsBar,
    NewsContent
  },
  data(){
    return{
      imgs:[
        '/profile/upload/lunbo1.avif',
        '/profile/upload/lunbo2.avif',
        '/profile/upload/lunbo3.avif',
      ],
      defaultVision: false,
      loading: false,
      currentDate: '2021-06-01',
      lists : [],
      dialogItem:{}
    }
  },
  methods: {
    openItem(item){
      this.defaultVision =  !this.defaultVision
      if (this.defaultVision){
        this.dialogItem = item
      }
    },
    getImgURL(url){
      return 'http://localhost:8888/FinancialRecommend' + url
    },
    initHot(){
      axios.get('/FinancialRecommend/product/hot')
      .then(response => {
        this.lists = response.data.data
      })
    }
  },
  created() {
    this.loading = true
    setTimeout(() => {
      this.loading = false
    },500)
    this.initHot()
  }
}
</script>

<style scoped>
.home-box{
  width: 90%;
  /*background-color: #e8ebeb;*/
  padding-top: 70px;
  margin: 0 auto ;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  scroll-behavior: smooth;
}
.box2{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.product-title{
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-family: "钉钉进步体 Regular";
  font-size: larger;
  font-weight: bolder;
  /*background-color: skyblue;*/
}
.product-content {
  width: 100%;
  height: 800px;
  /*background-color: red;*/
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.item{
  width: 300px;
  height: 300px;
  margin: 20px 20px;
}
.img{
  width: 300px;
  height: 230px;
}
.carousel{
  width: 1367px;
  height: 400px;
}
.newBox{
  width: 100%;
  height: 600px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.anchor{
  width: 70px;
  height: 200px;
  /*background-color: red;*/
  position: fixed;
  bottom: 150px;
  right: 0;
}
.anchor-box{
  box-shadow:  0 2px 4px rgba(0, 0, 0, .12);
  border-radius: 100%;
  width: 100%;
  height: 66px;
  margin: 0 0;
  text-align: center;
  line-height: 66px;
}
a{
  text-underline: none;
}
html {
  scroll-behavior: smooth;
}
</style>
